import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:robot3/services.dart';
import 'package:robot3/viewmodel/CommodityViewModel2.dart';
import 'package:robot3/widgets.dart';

import 'backButton1.dart';

class Xiangqing3 extends StatelessWidget {
  const Xiangqing3({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // 获取传递的参数
    final arguments =
        ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>;
    final id = arguments['id'];
    // final name = arguments['name'];
    return ChangeNotifierProvider(
      create: (context) {
        final provider = CommodityViewModel2();
        provider.getProductById(id);
        return provider;
      },
      child: XiangqingScreen(title: 'Flutter Demo Home Page'),
    );
  }
}

class XiangqingScreen extends StatelessWidget {
  const XiangqingScreen({super.key, required this.title});
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Image equivalent to the Image composable
          Image.asset(
            'images/bg.png', // 替换为你的图片路径
            fit: BoxFit.cover,
            width: double.infinity,
            height: double.infinity,
          ),
          Padding(
            padding: const EdgeInsets.all(
              30.0 / ratio, // 像素值直接使用 dp 转换
            ),
            child: // 加载完成后显示商品信息
                Stack(
              // crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                BackButton1(
                  onClick: (text) {
                    Navigator.of(context).pop();
                  },
                ),
                Center(
                  // alignment: Alignment.center,
                  child: Column(children: [TitleText(text: '详情'),
                    Expanded(child: Padding(
                        padding: const EdgeInsets.only(left: 278/ratio,right: 278/ratio),
                        child:  Content()),
                        )
                  ]
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class Content extends StatelessWidget {
  const Content({super.key});

  @override
  Widget build(BuildContext context) {
    final commodity = context.watch<CommodityViewModel2>().commodity;
    // 生成前 10 个相同内容的小部件
    List<Widget> widgets = List.generate(
      20,
          (index) =>   TitleText(text: '参数$index'),
    );

    return commodity == null
        ? Center(
      child: Container(), // 显示加载指示器
    )
        :RobotCard(
      child: Padding(
        padding: const EdgeInsets.all(
          30.0 / ratio, // 像素值直接使用 dp 转换
        ),
        child:
        SingleChildScrollView(child:
        Column(
          // mainAxisAlignment:MainAxisAlignment.end ,
          // crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.transparent, // 设置背景颜色
                borderRadius: BorderRadius.circular(10), // 可选：设置圆角
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  RobotListWidget(ratio: ratio),
                  SizedBox(width: 20 / ratio),
                  //大图：
                  Container(
                    width: 500 / ratio, // 固定宽度
                    height: 540 / ratio,
                    color: Colors.red,
                  ),
                  SizedBox(width: 10 / ratio),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    spacing: 30 / ratio,
                    children: [
                      Container(
                        color: Colors.blue,
                        // 背景颜色便于观察效果
                        width: 604 / ratio,
                        // 固定宽度
                        // child:    TitleText30(text: '轻奢风全通体奶油白色格栅栅瓷砖卫生浴室厕墙砖地砖'),
                        child: TitleText30(
                          text: '${commodity.name}'
                        ),
                      ),
                      Text(
                        "¥${commodity.price}",
                        maxLines: 300,
                        overflow: TextOverflow.ellipsis,
                        style: const TextStyle(
                          fontSize: 42 / ratio,
                          color: Colors.red,
                          fontWeight: FontWeight.normal,
                          letterSpacing: 0.0,
                          wordSpacing: 0.0, // 设置单词间距
                        ),
                      ),

                      Row(
                        children: [
                          Text(
                            "风        格",
                            maxLines: 300,
                            overflow: TextOverflow.ellipsis,
                            style: const TextStyle(
                              fontSize: 24 / ratio,
                              color: MyBlack,
                              fontWeight: FontWeight.normal,
                              letterSpacing: 0.0,
                              wordSpacing: 0.0, // 设置单词间距
                            ),
                          ),
                          SizedBox(width: 20),

                          Text(
                            "奶油风",
                            maxLines: 300,
                            overflow: TextOverflow.ellipsis,
                            style: const TextStyle(
                              fontSize: 24 / ratio,
                              color: MyBlack,
                              fontWeight: FontWeight.normal,
                              letterSpacing: 0.0,
                              wordSpacing: 0.0, // 设置单词间距
                            ),
                          ).withBackgroundAndPadding(),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),

            TitleText(text: '参数'),
            TitleText(text: '内容20191'),
            TitleText(text: '内容20191'),
            ...widgets,
          ],
        )),
      ),
    );
  }
}

const String host = 'applet.xmlights.com';
